<template>
  <div class="home_card">
    <div class="rowTitle">
      <!-- <span>现场核实身份</span> -->
      <span>{{ $t("Home.index20") }}</span>
      <date-range-picker
        @change="getData"
        :pickerOptions="{ shortcuts: calendarShortcuts }"
        v-model="query_time"
        class="date-item"
      />
    </div>
    <ul class="caContent" v-show="sumCount != 0">
      <li
        :style="{
          width:
            ((Number(item.appointment_count) / Number(sumCount)) * 100).toFixed(
              2
            ) + '%',
        }"
        v-for="(item, index) in liData"
        :key="index"
      >
        <div
          v-if="
            ((Number(item.appointment_count) / Number(sumCount)) * 100).toFixed(
              2
            ) <= 10
          "
        >
          <el-tooltip
            popper-class="index_address"
            placement="right-end"
            effect="light"
            :visible-arrow="false"
          >
            <img
              @click="toRoute(item.id, checkPermission(['appointment@index']))"
              src="~@/assets/images/img23.png"
              alt=""
            />
            <div slot="content" class="tooltip-content">
              <div class="name">
                {{ item["name_" + $store.state.settings.langTail] }}
              </div>
              <h2>
                {{ item.appointment_count }}
              </h2>
              {{ $t("Home.index14") }}
            </div>
          </el-tooltip>
        </div>
        <div
          v-else
          @click="toRoute(item.id, checkPermission(['appointment@index']))"
        >
          <div class="name">
            {{ item["name_" + $store.state.settings.langTail] }}
          </div>
          <h2>
            {{ item.appointment_count }}
          </h2>
          {{ $t("Home.index14") }}
        </div>
      </li>
      <li
        v-if="liData.length >= 5"
        :style="{ width: '10%' }"
        @click="toRoute(undefined, checkPermission(['appointment@index']))"
      >
        <img src="~@/assets/images/img18.png" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
import DateRangePicker from "@/components/DateRangePicker/index";
import { getScenesCount } from "@/api/home";
import { calendarShortcuts } from "@/utils/shortcuts";

export default {
  components: {
    DateRangePicker,
  },
  data() {
    return {
      calendarShortcuts,
      query_time: [],
      ScenesData: {},
      liData: [],
      sumCount: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getScenesCount({
        start_time:
          this.query_time && this.query_time[0]
            ? parseInt(this.query_time[0] / 1000)
            : "",
        end_time:
          this.query_time && this.query_time[1]
            ? parseInt(this.query_time[1] / 1000)
            : "",
      })
        .then((res) => {
          if (res.code == 10000) {
            this.liData = [];
            this.ScenesData = res.data;
            let index = 0;
            let sumCount = 0;
            res.data.list.forEach((item) => {
              if (item.appointment_count != 0) {
                index++;
                if (index <= 5) {
                  sumCount += item.appointment_count;
                  this.sumCount = sumCount;
                  this.liData.push(item);
                } else {
                  return;
                }
              }
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    toRoute(val, disabled) {
      if (!disabled) {
        return false;
      }
      this.$router.push({
        // name: "现场见面",
        path: "/openList/meetSite",
        query: {
          scene_id: val,
        },
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.caContent {
  list-style: none;
  color: #fff;
  font-size: 14px;
  display: flex;
  padding-top: 5px;
  > li {
    text-align: center;
    height: 200px;
    line-height: 230px;
    margin-right: 1.5%;
    position: relative;
    .name {
      position: absolute;
      line-height: 14px;
      top: 35%;
      width: 90%;
      margin: 0 5%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    h2 {
      display: inline-block;
    }
    img {
      max-width: 25px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  > li:last-child {
    margin-right: 0;
  }
  li:nth-child(1) {
    background-color: #1fcaa8;
  }
  li:nth-child(2) {
    background-color: #448ef6;
  }
  li:nth-child(3) {
    background-color: #fdd843;
  }
  li:nth-child(4) {
    background-color: #f34847;
  }
  li:nth-child(5) {
    background-color: #f56b50;
  }
  li:nth-child(6) {
    background-color: #46cf76;
  }
}
</style>
